<!DOCTYPE html>
<html lang="{{ lang }}" class="light loading">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Sprunki Phase 3{% endblock %}</title>
    <meta name="description" content="{% block description %}Experience Sprunki Phase 3, the innovative music creation game where rhythm meets creativity.{% endblock %}">
    
    {# Tailwind CSS #}
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
    
    {# Theme Configuration #}
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#FF69B4',    /* Pink */
                        secondary: '#9B6BFF',  /* Purple */
                        accent: '#00FFFF',     /* Cyan */
                        success: '#4CAF50',    /* Green */
                        warning: '#FFC107',    /* Amber */
                        error: '#FF5252',      /* Red */
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 dark:bg-dark-bg transition-colors duration-200">
    <!-- Navigation -->
    <nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-50 transition-colors duration-200">
        <div class="max-w-7xl mx-auto px-4">
            <!-- Mobile Navigation -->
            <div class="flex justify-between items-center h-14 md:h-16">
                <!-- Logo & Brand -->
                <div class="flex-shrink-0 flex items-center">
                    <img src="{{ url_for('static', filename='images/logo.png') }}" 
                         alt="Sprunki Logo" 
                         class="w-6 h-6 md:w-8 md:h-8">
                    <a href="{{ url_for('main.index', lang=g.current_language) }}" 
                       class="ml-2 text-lg md:text-xl font-bold text-primary">
                        Sprunki
                    </a>
                </div>

                <!-- Mobile Controls -->
                <div class="flex items-center space-x-2 md:hidden">
                    <!-- Language Switcher -->
                    <div class="relative">
                        <button id="mobile-language-switcher" 
                                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                            <span class="flag-icon flag-icon-{{ g.current_flag }}"></span>
                        </button>
                        <div id="mobile-language-dropdown" 
                             class="hidden absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl z-50">
                            {% for code, name in g.languages.items() %}
                            {% with %}
                                {% set args = request.view_args.copy() if request.view_args else {} %}
                                {% if 'lang' in args %}
                                    {% set _ = args.pop('lang') %}
                                {% endif %}
                                {% if request.endpoint == 'main.blog_post' %}
                                    <a href="{{ url_for(request.endpoint, lang=code, slug=request.view_args.get('slug', '')) }}" 
                                       class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                {% else %}
                                    <a href="{{ url_for(request.endpoint, lang=code, **args) if request.endpoint != 'static' else '#' }}" 
                                       class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                {% endif %}
                                    <span class="flag-icon flag-icon-{{ LANGUAGE_MAP[code]['flag'] }} mr-2"></span>
                                    <span class="text-gray-900 dark:text-gray-100">{{ name }}</span>
                                </a>
                            {% endwith %}
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Theme Toggle -->
                    <button id="mobile-theme-toggle" 
                            class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <i class="fas fa-sun" id="mobile-theme-toggle-light-icon"></i>
                        <i class="fas fa-moon hidden" id="mobile-theme-toggle-dark-icon"></i>
                    </button>

                    <!-- Menu Toggle -->
                    <button id="mobile-menu-button" 
                            class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>

                <!-- Desktop Navigation -->
                <div class="hidden md:flex md:items-center md:space-x-4">
                    <a href="{{ url_for('main.about', lang=g.current_language) }}" 
                       class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary px-3 py-2">
                        {{ _('About') }}
                    </a>
                    <a href="{{ url_for('main.blog', lang=g.current_language) }}" 
                       class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary px-3 py-2">
                        {{ _('Blog') }}
                    </a>
                    <a href="{{ url_for('main.contact', lang=g.current_language) }}" 
                       class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary px-3 py-2">
                        {{ _('Contact') }}
                    </a>
                    
                    <!-- Desktop Language Switcher -->
                    <div class="relative">
                        <button id="desktop-language-switcher" 
                                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                            <span class="flag-icon flag-icon-{{ g.current_flag }}"></span>
                        </button>
                        <div id="desktop-language-dropdown" 
                             class="hidden absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
                            {% for code, name in g.languages.items() %}
                            {% with %}
                                {% set args = request.view_args.copy() if request.view_args else {} %}
                                {% if 'lang' in args %}
                                    {% set _ = args.pop('lang') %}
                                {% endif %}
                                {% if request.endpoint == 'main.blog_post' %}
                                    <a href="{{ url_for(request.endpoint, lang=code, slug=request.view_args.get('slug', '')) }}" 
                                       class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                {% else %}
                                    <a href="{{ url_for(request.endpoint, lang=code, **args) if request.endpoint != 'static' else '#' }}" 
                                       class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                {% endif %}
                                    <span class="flag-icon flag-icon-{{ LANGUAGE_MAP[code]['flag'] }} mr-2"></span>
                                    <span class="text-gray-900 dark:text-gray-100">{{ name }}</span>
                                </a>
                            {% endwith %}
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Desktop Theme Toggle -->
                    <button id="desktop-theme-toggle" 
                            class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <i class="fas fa-sun" id="desktop-theme-toggle-light-icon"></i>
                        <i class="fas fa-moon hidden" id="desktop-theme-toggle-dark-icon"></i>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden z-40">
                <div class="py-2 space-y-1 border-t border-gray-200 dark:border-gray-700">
                    <a href="{{ url_for('main.about', lang=g.current_language) }}" 
                       class="block px-4 py-2 text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
                        {{ _('About') }}
                    </a>
                    <a href="{{ url_for('main.blog', lang=g.current_language) }}" 
                       class="block px-4 py-2 text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
                        {{ _('Blog') }}
                    </a>
                    <a href="{{ url_for('main.contact', lang=g.current_language) }}" 
                       class="block px-4 py-2 text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
                        {{ _('Contact') }}
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main>
        {% block content %}{% endblock %}

        {# 允许页面控制是否显示相关戏和FAQ部分 #}
        {% if show_related_games|default(true) %}
        <!-- Related Games -->
        <section class="py-16 bg-gray-50 dark:bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center mb-12">{{ _('Related Games') }}</h2>
                <div class="flex flex-wrap gap-4 justify-center">
                    {% for game in related_games %}
                    <a class="flex flex-col items-center w-32" href="{{ game.url }}">
                        <div class="w-32 h-32 relative mb-2">
                            <img alt="{{ game.title }}" 
                                 loading="lazy" 
                                 width="128" 
                                 height="128" 
                                 decoding="async" 
                                 class="rounded-lg" 
                                 src="{{ url_for('static', filename=game.image) }}">
                        </div>
                        <span class="text-center text-gray-600 dark:text-gray-300">{{ game.title }}</span>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </section>

        <!-- Video Section -->
        <section class="py-16 bg-white dark:bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-gray-200">Experience Sprunki Phase 3</h2>
                <div class="aspect-w-16 aspect-h-9">
                    <iframe class="w-full h-[500px]" src="https://www.youtube.com/embed/wwe35EyXgmo?si=pgr15wr8aADutKfF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                </div>
            </div>
        </section>

        <!-- How to Play -->
        <section class="py-16 bg-white dark:bg-gray-900">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center mb-12">{{ _('How to Play Sprunki') }}</h2>
                
                <!-- Game Introduction -->
                <div class="prose dark:prose-invert max-w-none mb-12">
                    <p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
                        {{ _('Sprunki is a casual music game that lets you craft unique soundscapes. This modded version of Incredibox by NyankoBfLolCombine gives you DJ control to mix loops, vocals, beats, and melodies—pretty much create your own musical style. The game features vibrant characters and sounds for a completely immersive experience full of rhythmic possibilities. Whether you\'re a music enthusiast or just love experimenting, it\'s a fun and engaging way to express your creativity.') }}
                    </p>
                </div>

                <!-- Gameplay Details -->
                <div class="prose dark:prose-invert max-w-none mb-12">
                    <h3 class="text-2xl font-bold mb-6">{{ _('Gameplay Overview') }}</h3>
                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        {{ _('Sprunki is a quirky, surreal, music-based game that combines creativity with creepy twists—yep, it does get a bit creepy, depending on your choices. Your goal is to assemble a bizarre band of unique characters and create melodies by assigning them different outfits and accessories. Each customization changes its sound, letting you experiment with endless musical combinations.') }}
                    </p>
                    
                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        {{ _('The game starts lighthearted as you craft a cheerful choir. Choose from avatars like TV heads, satellite dishes, and Medusa-like figures, each contributing to the band\'s unique vibe. The choice is all yours—there are different combinations to uncover hidden tunes, mixing cheerful beats or darker undertones, depending on your choices.') }}
                    </p>

                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        {{ _('As you progress, the game takes a darker turn. Innocent melodies morph into haunting soundscapes, and your once-jolly avatars begin to appear cursed. The cheerful tree might display missing person posters, and the formerly harmonious sounds turn dissonant, with eerie visuals creeping in. The more phases you unlock, the more unsettling the game becomes, introducing new macabre characters.') }}
                    </p>

                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        {{ _('While the gameplay focuses on experimenting with sound, each phase introduces new challenges. Some characters contribute little or refuse to "sing," while others evolve into grotesque forms. The gallery section teases spoilers, revealing the grim fates of your band members after each phase.') }}
                    </p>
                </div>

                <!-- Similar Games -->
                <div class="prose dark:prose-invert max-w-none">
                    <h3 class="text-2xl font-bold mb-6">{{ _('More Games Like This') }}</h3>
                    <p class="text-gray-700 dark:text-gray-300">
                        {{ _('Unwind and keep the fun going with some of our most popular casual games, including another music category title called Blob Opera, a game that uses a machine learning model trained on real voices to make it easy for anyone to create amazing operatic music. Other fun titles worth a try include Tile Guru, a casual puzzle tile-matching game that combines mental sharpness with relaxation, or Candy Riddles, a puzzle game that, with each successful match of three or more delicious treats, you\'ll clear the board and make way for even more delicious combinations.') }}
                    </p>
                </div>
            </div>
        </section>
        {% endif %}

        {% if show_faq|default(true) %}
        <!-- FAQ Section -->
        <section id="faqs" class="py-16 bg-white dark:bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center mb-12">{{ _('Frequently Asked Questions') }}</h2>
                <div class="space-y-8">
                    <!-- What is Sprunki -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('What is Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('Sprunki Incredibox is an interactive music creation game featuring unique character designs and musical capabilities within the Incredibox universe.') }}
                        </p>
                    </div>
                    
                    <!-- How to Play -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('What is the gameplay like in Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('The gameplay involves mixing different musical layers using characters, each representing a unique sound or effect to create harmonious tracks.') }}
                        </p>
                    </div>

                    <!-- Characters -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('What are the main characters in Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('Key characters include Orange (Oren), Silver (Clukr), Gray, Brud, Garnold, Owakcx, and Sky, among others, each contributing unique sounds to the musical experience.') }}
                        </p>
                    </div>

                    <!-- Platforms -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('What platforms support Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('Sprunki Incredibox is available on multiple platforms including iOS, Android, and web browsers.') }}
                        </p>
                    </div>

                    <!-- Community -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('How does the community interact regarding Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('The community interacts through forums, Discord servers, and social media groups where they share creations, discuss gameplay strategies, and collaborate on projects.') }}
                        </p>
                    </div>

                    <!-- Music Creation -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('How does sound mixing work in Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('The game automatically balances and mixes the sounds from different characters to create a cohesive track, allowing players to focus on creativity rather than technical audio editing.') }}
                        </p>
                    </div>

                    <!-- Updates -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('How often are new characters added to Sprunki Incredibox?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('The frequency of new character additions can vary, but developers typically introduce new characters through updates or expansions to keep the game fresh and engaging.') }}
                        </p>
                    </div>

                    <!-- Educational Use -->
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                        <h3 class="text-xl font-semibold mb-3">{{ _('Can Sprunki Incredibox be used for educational purposes?') }}</h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ _('Yes, many educators use Sprunki Incredibox as a tool to teach music composition, rhythm, and creative expression in a fun and interactive way.') }}
                        </p>
                    </div>
                </div>
            </div>
        </section>
        {% endif %}
    </main>

    {% include 'components/footer.html' %}
    
    {# Core Scripts #}
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script>
        // Language switcher
        const langSwitcher = document.getElementById('language-switcher');
        const langDropdown = document.getElementById('language-dropdown');

        if (langSwitcher && langDropdown) {
            langSwitcher.addEventListener('click', () => {
                langDropdown.classList.toggle('hidden');
            });

            document.addEventListener('click', (event) => {
                if (!langSwitcher.contains(event.target)) {
                    langDropdown.classList.add('hidden');
                }
            });
        }

        // Mobile menu
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 移除 loading 类以启用平滑滚动
        window.addEventListener('load', function() {
            document.documentElement.classList.remove('loading');
        });
    </script>
</body>
</html> 